import React, { Component } from 'react';
import { Modal, Table, Form, Input, Button } from 'antd';
import { getDriverList as getTableData } from 'Services/publicServer.js';
import { indexOf } from 'lodash';
import PropTypes from 'prop-types';

const FormItem = Form.Item;

@Form.create()
export default class AddDriverModal extends Component {
  static propTypes = {
    visible: PropTypes.bool,
    onOk: PropTypes.func,
    onCancel: PropTypes.func,
  };

  static defaultProps = {
    visible: false,
    onOk: () => {},
    onCancel: () => {},
  };

  constructor(props) {
    super(props);
    window.AddDriverModal = this;
    window.indexOf = indexOf;
  }

  state = {
    pageNo: 1,
    pageSize: 5,
    total: 0,
    filterParams: {},
    dataSource: [],
    selectedRowKeys: [],
    selectedObj: [],
  };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = () => {
    const { pageNo, pageSize, filterParams } = this.state;
    const params = {
      pageNo,
      pageSize,
      ...filterParams,
    };
    getTableData(params).then(res => {
      this.setState({
        dataSource: res.data.map((item, index) => ({
          index: index + 1 + (pageNo - 1) * pageSize,
          ...item,
        })),
        total: res.total,
      });
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields(async (err, filterParams) => {
      await this.setState({ filterParams });
      this.fetchData();
    });
  };

  handlePaginationChange = async (pageNo, pageSize) => {
    await this.setState({ pageNo, pageSize });
    this.fetchData();
  };

  columns = [
    {
      title: '序号',
      width: '65px',
      key: 'index',
      dataIndex: 'index',
    },
    {
      title: '司机',
      key: 'name',
      dataIndex: 'name',
    },
  ];

  pagination = () => ({
    total: +this.state.total,
    showQuickJumper: true,
    showSizeChanger: true,
    onChange: this.handlePaginationChange,
    onShowSizeChange: this.handlePaginationChange,
    pageSizeOptions: ['5', '10', '15', '20'],
    defaultPageSize: 5,
  });

  rowSelection = () => ({
    selectedRowKeys: this.state.selectedRowKeys,
    onChange: (selectedRowKeys, selectedObj) => {
      this.setState({ selectedRowKeys });
      this.setState({ selectedObj: selectedObj.map(({ index, ...obj }) => obj) });
    },
  });

  render() {
    const { columns, pagination, rowSelection } = this;
    const { getFieldDecorator } = this.props.form;
    const { dataSource } = this.state;

    return (
      <Modal
        title="选择司机"
        okText="确认选择"
        width="1100px"
        visible={this.props.visible}
        onOk={this.props.onOk.bind(this, this.state.selectedObj)}
        onCancel={this.props.onCancel}
      >
        <Form onSubmit={this.handleSubmit} layout="inline" style={{ margin: '0 12px 12px' }}>
          <FormItem label="线路名">
            {getFieldDecorator('lineId', {})(<Input placeholder="请输入线路名查询" />)}
          </FormItem>
          <FormItem>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
          </FormItem>
        </Form>
        <Table
          bordered
          rowKey="id"
          columns={columns}
          dataSource={dataSource}
          rowSelection={rowSelection()}
          pagination={pagination()}
        />
      </Modal>
    );
  }
}
